<template>
    <view class="container">
        <scroll-view :scroll-x="true" class="spike-list-conter" style="white-space: nowrap; display: flex">
            <view class="spike-list-num" v-for="(item, index) in times" :key="index">
                <view :class="'spike-list-num-to ' + (time == item || time - 1 == item ? '' : 'spike-list-num-to-s')" :data-id="item">{{ index }}</view>

                <view class="spike-list-num-bo">{{ time == item || time - 1 == item ? '抢购中' : '即将开始' }}</view>
            </view>
        </scroll-view>

        <view class="list-header">
            <view class="index-search-box dis-flex" style="position: static">
                <!-- <navigator class="index-search flex-box" hover-class="none" openType="navigate" url="../search/index"> -->
                <!-- <view bindtap="toSynthesize" class="flex-box t-c p-r" data-index="sort_order" id="list-0">
        <text>筛选 </text>
        <text class="f-22 iconfont icon-shaixuan col-7" style="padding-left:2rpx"></text>
      </view> -->
            </view>
            <scroll-view
                @scrolltolower="bindDownLoad"
                class="weui-panel weui-panel_access"
                :scroll-y="true"
                :style="'height: ' + scrollHeight + 'px; width: 750rpx;'"
                v-if="list.length > 0"
            >
                <view class="new">
                    <view :class="'category-list ' + arrange">
                        <navigator class="list b-f" hover-class="none" :url="'./index?item_id=' + item.items.goods_id" v-for="(item, index) in list" :key="index">
                            <view class="left">
                                <view class="img">
                                    <image class="goodsImg" mode="scaleToFill" :src="item.items.image[0].file_path"></image>
                                </view>
                            </view>

                            <view class="right">
                                <view class="cont">
                                    <text class="f-30 title twolist-hidden m-top10">{{ item.items.goods_name }}</text>
                                    <view class="price f-34 col-m m-top10">
                                        ￥{{ item.items.sku[0].shop_price }}
                                        <text class="del f-22" v-if="item.items.market_price > 0">{{ item.items.market_price }}</text>
                                    </view>
                                </view>
                            </view>
                        </navigator>
                    </view>
                </view>
                <view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
            </scroll-view>
        </view>

        <view v-if="!noList && !list.length" class="yoshop-notcont" style="margin-top: 130px">
            <view class="img">
                <image mode="aspectFit" src="/static/images/no_content.png"></image>
            </view>
            <text class="cont">亲, 请下个时段再来</text>
        </view>
    </view>
</template>

<script>
const app = getApp();
var timestamp = Date.parse(new Date());
var date = new Date(timestamp);
export default {
    data() {
        return {
            scrollHeight: null,
            showView: false,
            arrange: '',
            sortType: 'all',
            // 排序类型
            sortPrice: false,
            // 价格从低到高

            option: {},
            list: {},
            noList: true,
            no_more: false,
            time: '',
            times: {
                '08:00': 8,
                '10:00': 10,
                '12:00': 12,
                '14:00': 14,
                '16:00': 16,
                '18:00': 18,
                '20:00': 20,
                '22:00': 22
            },
            page: 1
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (option) {
        let that = this;
        // 设置商品列表高度
        that.setListHeight();

        // 记录option
        that.setData(
            {
                option,
                time: date.getHours()
            },
            function () {
                // 获取商品列表
                that.getGoodsList(true);
            }
        );
    },
    /**
     * 设置分享内容
     */
    onShareAppMessage: function () {
        return {
            title: '全部分类',
            desc: '',
            path: '/pages/category/index?' + params
        };
    },
    methods: {
        /**
         * 获取商品列表
         */
        getGoodsList: function (is_super, page) {
            let that = this;
            app.globalData._get(
                'spike/spikeList',
                {
                    time: that.time
                },
                function (result) {
                    let resultList = result.data.spikeList;
                    console.log(resultList);
                    if (resultList == false) {
                        that.setData({
                            noList: false
                        });
                    } else {
                        that.setData({
                            list: resultList
                        });
                    }
                }
            );
        },

        /**
         * 设置商品列表高度
         */
        setListHeight: function () {
            let that = this;
            uni.getSystemInfo({
                success: function (res) {
                    that.setData({
                        scrollHeight: res.windowHeight - 90
                    });
                }
            });
        },

        /**
         * 切换排序方式
         */
        switchSortType: function (e) {
            let that = this;
            let newSortType = e.currentTarget.dataset.type;
            let newSortPrice = newSortType === 'price' ? !this.sortPrice : true;
            this.setData(
                {
                    list: {},
                    page: 1,
                    sortType: newSortType,
                    sortPrice: newSortPrice
                },
                function () {
                    // 获取商品列表
                    that.getGoodsList(true);
                }
            );
        },

        /**
         * 跳转筛选
         */
        // toSynthesize: function (t) {
        //   wx.navigateTo({
        //     url: "../category/screen?objectId="
        //   });
        // },

        /**
         * 切换列表显示方式
         */
        onChangeShowState: function () {
            let that = this;
            that.setData({
                showView: !that.showView,
                arrange: that.arrange ? '' : 'arrange'
            });
        },

        /**
         * 下拉到底加载数据
         */
        bindDownLoad: function () {
            // 已经是最后一页
            if (this.page >= this.list.last_page) {
                this.setData({
                    no_more: true
                });
                return false;
            }
            this.getGoodsList(false, ++this.page);
        },

        /**
         * 商品搜索
         */
        triggerSearch: function () {
            let pages = getCurrentPages();
            // 判断来源页面
            if (pages.length > 1 && pages[pages.length - 2].route === 'pages/search/index') {
                uni.navigateBack();
                return;
            }
            // 跳转到商品搜索
            uni.navigateTo({
                url: '../search/index'
            });
        }
    }
};
</script>
<style>
@import './list.css';
</style>
